import { Tabs } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import HotConfiguration from "@/pages/robotManagement/hotSpots";
import QuickEntry from "@/pages/robotManagement/quickEntry";
import BottomLabel from "@/pages/robotManagement/bottomLabel";
import WelcomeSetting from "./welcomeSetting";
import AppearanceSettings from "./appearanceSettings/index";
import styles from "./index.less";

class InlineSetting extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeKey: '1'
    }
  }

  changeTab = activeKey => {
    this.setState({ activeKey })
  }

  render() {
    const { activeKey } = this.state;
    const { robotId, applicationId, moduleList, channel, isllmCustom, loginType } = this.props;

    return (
      <div className={styles.knowledge_configuration}>
        <Tabs activeKey={activeKey} onChange={this.changeTab} className="inLineSettingTab">
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.appearanceSetting' })} key="1">
            {
              activeKey == 1 ? (
                <AppearanceSettings
                  applicationId={applicationId}
                  isllmCustom={isllmCustom}
                  onRef={(ref) => (this.AppearanceSettings = ref)}
                  moduleList={moduleList}
                  channel={channel}
                  loginType={loginType}
                />
              ) : ''
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.welcomeMessage' })} key="2">
            {
              activeKey == 2 ? (
                <WelcomeSetting applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.hotIssues' })} key="3">
            {
              activeKey == 3 ? (
                <HotConfiguration applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
          {
            /**
             * <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.quickEntry' })} key="4">
            {
              activeKey == 4 ? (
                <QuickEntry applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
             */
          }
          <Tabs.TabPane tab={formatMessage({ id: 'inlineSetting.bottomLabel' })} key="5">
            {
              activeKey == 5 ? (
                <BottomLabel applicationId={applicationId} />
              ) : ''
            }
          </Tabs.TabPane>
        </Tabs>
      </div>
    )
  }
}

export default InlineSetting